import { onMounted, reactive, ref, watch } from 'vue';
import {
  analysisLrc
} from '../utils';
export default function(props, lrcContainer, lrcUl) {
  const audioObj = reactive({
    ul: lrcUl, // 歌词列表
    container: lrcContainer // 播放器容器
  })
  const lrcData = ref([]); // 音乐数据
  // 当前高亮的li
  const currentIndex = ref<number>(0);
  // 骨架屏个数
  const skeletonNum = ref<number>(0);
  onMounted(() => {
    methods.init();
  })
  watch(() => props.lrc, val => {
    if (val) {
      // 解析歌词数据
      lrcData.value = analysisLrc(props.lrc);
    }
  })
  const methods = {
    /**
     * 根据时间来获取当前需要显示的条数
     * @returns
     */
    getMusicIndex(time) {
      for (let i = 0; i < lrcData.value.length; i++) {
        const musicTime = lrcData.value[i].time;
        if (time < musicTime) {
          return i - 1;
        }
      }
      return lrcData.value.length - 1;
    },
    /**
     * 监听音频播放器的进度变化
     * @param flag
     */
    timeUpdate(currentTime) {
      methods.calibrationMove(currentTime)
    },
    init() {
      // 计算 骨架屏内部个数
      skeletonNum.value = Math.floor(audioObj.container.offsetHeight / 30);
    },
    /**
     * lrc字幕移动校准后的移动
     * @param currentTime 当前时间
     */
    calibrationMove(currentTime) {
      currentIndex.value = methods.getMusicIndex(currentTime);
      let movePNumber = 0;
      for (let i = 0, len = lrcData.value.length; i < len; i++) {
        if (i >= currentIndex.value) break;
        const item = lrcData.value[i];
        movePNumber += item.value.length;
      }
      const containerHeight = audioObj.container.offsetHeight; // Container高度
      const pHeight = 25; // 每个p标签的高度
      let movePx = pHeight * movePNumber + pHeight / 2 - containerHeight / 2; // 需要移动的
      const maxMove = audioObj.ul.scrollHeight - containerHeight / 2;
      // 范围判断 小于最小高度，则不移动
      if (movePx < 0) {
        movePx = 0;
      }
      // 大于最大范围，则移动到底部
      if (movePx > maxMove) {
        movePx = maxMove;
      }
      // 移动到指定像素位置
      audioObj.ul.scrollTo({
        behavior: 'smooth',
        top: movePx
      })
    }
  }
  return {
    methods,
    lrcData,
    currentIndex,
    skeletonNum
  }
}
